<script setup>
// 分类id查询mp图片管理
const {
  data: { multimedia },
} = await getFetchData({
  url: "wx/multimedia/pageMultimedia",
  opts: {
    title: "",
    fileType: 1, //1图片 2 视频
    pageNum: 1,
    pageSize: 999,
    typeId: 1081,
  },
});
const imagesList = ref([]);
imagesList.value = multimedia.map((item) => item.ImgUrl).flat();

const meitiShow = ref(false);
const zhanshangShow = ref(false);
const num1 = ref(0);
const num2 = ref(0);
const num3 = ref(0);
const num4 = ref(0);
const num5 = ref(0);
const dayText = ref();
function shouDayFun() {
  let nowDate = new Date().getTime();
  let endDate = new Date("2024/06/27 00:00:00");
  let s = (endDate - nowDate) / 1000;
  let day = parseInt(s / 3600 / 24);
  dayText.value = day;
}
const wd = ref(1920);
let newNum1, newNum2, newNum3, newNum4, newNum5;

onMounted(() => {
  shouDayFun();
  wd.value = document.body.clientWidth;
  newNum1 = useTransition(num1, {
    duration: 5000,
  });
  num1.value = 7000;
  newNum2 = useTransition(num2, {
    duration: 5000,
  });
  num2.value = 2000;
  newNum3 = useTransition(num3, {
    duration: 5000,
  });
  num3.value = 50;
  newNum4 = useTransition(num4, {
    duration: 5000,
  });
  num4.value = 50;
  newNum5 = useTransition(num5, {
    duration: 5000,
  });
  num5.value = 90000;
});
</script>

<template>
  <Banner />
  <!-- 快捷按钮 -->

  <div class="quick">
    <div class="countdown">
      <div class="bg-img">
        <div class="rg">
          <!-- <div>距离大会开幕</div> -->
          <div class="day" :style="{ marginTop: dayText >= 1 ? '' : '15px' }">
            <span v-if="dayText >= 1" class="num">{{ dayText }}</span>
            {{ dayText >= 1 ? "天" : "已开展" }}
          </div>
        </div>
      </div>
      <div class="quick-btn">
        <NuxtLink to="/apply/exhibition" class="btn-lf">
          <img class="icon" src="@/assets/images/2.jpg" alt="" />
          <div>展商报名</div>
          <img class="right" src="@/assets/images/7.png" alt="" />
        </NuxtLink>
        <NuxtLink to="/apply/audience" class="btn-lf">
          <img class="icon" src="@/assets/images/3.jpg" alt="" />
          <div>观众报名</div>
          <img class="right" src="@/assets/images/7.png" alt="" />
        </NuxtLink>
        <div class="btn-rg">
          <NuxtLink to="/activity" class="btn-rg-item">
            <img src="@/assets/images/5.jpg" alt="" />
            <div class="tit">同期活动</div>
            <img src="@/assets/images/7.png" alt="" />
          </NuxtLink>
          <NuxtLink to="/media" class="btn-rg-item">
            <img src="@/assets/images/6.jpg" alt="" />
            <div class="tit">合作媒体</div>
            <img src="@/assets/images/7.png" alt="" />
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
  <!-- 数字滚动 -->
  <div class="digital">
    <div class="digital-box">
      <div class="digital-item">
        <div>
          <el-statistic class="digital-item-num" title="" :value="newNum1" />
          <span>+</span>
        </div>
        <div>超大规模</div>
      </div>
      <div class="digital-item">
        <div>
          <el-statistic class="digital-item-num" title="" :value="newNum2" />
          <span>+</span>
        </div>
        <div>优质外贸供应商</div>
      </div>
      <div class="digital-item">
        <div>
          <el-statistic class="digital-item-num" title="" :value="newNum3" />
          <span>+</span>
        </div>
        <div>产业带</div>
      </div>
      <div class="digital-item">
        <div>
          <el-statistic class="digital-item-num" title="" :value="newNum4" />
          <span>+</span>
        </div>
        <div>会议论坛</div>
      </div>
      <div class="digital-item">
        <div>
          <el-statistic class="digital-item-num" title="" :value="newNum5" />
          <span>+</span>
        </div>
        <div>采购商</div>
      </div>
    </div>
  </div>
  <!-- 品类专区 -->
  <div class="category-area">
    <div class="sub-title">展会品类专区</div>
    <div class="sub-en">Category area</div>
    <div class="cate-line"></div>
    <div class="cate-box">
      <div class="cate-item" v-for="item in 16">
        <img :src="`cateLogo/${item - 1}.jpg`" alt="" />
      </div>
    </div>
  </div>
  <!-- 平台方 -->
  <div class="platform">
    <div class="sub-title">平台方</div>
    <div class="sub-en">latform side</div>
    <div class="cate-line"></div>
    <div class="platform-box">
      <img style="width: 100%" src="@/assets/images/pingtai.jpg" alt="" />
    </div>
  </div>
  <!-- 往届精彩回顾 -->
  <div class="review">
    <div class="sub-title">往届精彩回顾</div>
    <div class="sub-en">Past wonderful Reviews</div>
    <div class="cate-line"></div>
    <!-- 回顾第一个轮播 -->
    <div class="review-swiper swiper-no-swiping">
      <Swiper
        :modules="[SwiperAutoplay]"
        :slides-per-view="wd > 768 ? 3 : 1"
        :speed="17000"
        :loop="true"
        :autoplay="{
          delay: 1,
          disableOnInteraction: false,
        }"
        class="mySwiper"
      >
        <SwiperSlide v-for="item in 6">
          <img :src="`swiper/${item}.jpg`" alt=""
        /></SwiperSlide>
      </Swiper>
    </div>
    <!-- 回顾第二个轮播 -->
    <div class="review-swiper2 swiper-no-swiping">
      <Swiper
        :modules="[SwiperAutoplay]"
        :slides-per-view="wd > 768 ? 3 : 1"
        :speed="12000"
        :loop="true"
        :autoplay="{
          delay: 1,
          disableOnInteraction: false,
        }"
        class="mySwiper"
      >
        <SwiperSlide v-for="item in [6, 5, 4, 3, 2, 1]">
          <img :src="`swiper/${item}.jpg`" alt=""
        /></SwiperSlide>
      </Swiper>
    </div>
  </div>
  <!-- 往届展商名录 -->
  <div class="exhi-list">
    <div>
      <div class="sub-title">往届展商目录</div>
      <div class="sub-en">Past wonderful Reviews</div>
      <div class="cate-line"></div>
      <div class="exhi-box">
        <img style="width: 100%" src="@/assets/images/zhanshang.jpg" alt="" />
      </div>
      <div class="exhi-more">
        <a @click.prevent="zhanshangShow = !zhanshangShow">{{
          zhanshangShow ? "收起" : "查看更多"
        }}</a>
      </div>
      <Transition>
        <div v-show="zhanshangShow" class="exhi-box">
          <img
            style="width: 100%; margin-top: 3vw"
            src="@/assets/images/zhanshang2.jpg"
            alt=""
          />
        </div>
      </Transition>
    </div>
    <!-- 拟邀采购商 -->
    <div class="mr-t-77">
      <div class="sub-title">拟邀采购商</div>
      <div class="sub-en">Invited purchaser</div>
      <div class="cate-line"></div>
      <div class="exhi-box">
        <template v-for="(itme, index) in imagesList">
          <div v-if="index <= 20" class="platform-item">
            <img :src="itme" alt="" />
          </div>
        </template>
      </div>
      <div v-if="imagesList.length >= 21" class="exhi-more">
        <a href="/caigouLogo">查看更多</a>
      </div>
    </div>
    <!-- 合作媒体 -->
    <div class="mr-t-77">
      <div class="sub-title">合作媒体</div>
      <div class="sub-en">Cooperative media</div>
      <div class="cate-line"></div>
      <div class="exhi-box">
        <img style="width: 100%" src="@/assets/images/meiti.jpg" alt="" />
      </div>
      <div class="exhi-more">
        <a @click.prevent="meitiShow = !meitiShow">{{
          meitiShow ? "收起" : "查看更多"
        }}</a>
      </div>
      <Transition>
        <div v-show="meitiShow" class="exhi-box">
          <img
            style="width: 100%; margin-top: 3vw"
            src="@/assets/images/meiti2.jpg"
            alt=""
          />
        </div>
      </Transition>
    </div>
  </div>
</template>
<style scoped>
.quick {
  max-width: 82%;
  margin: 0 auto;
  position: relative;
}

.countdown {
  position: absolute;
  top: -1.042vw;
  width: 100%;
  z-index: 9;
}

.bg-img {
  background-image: url("../assets/images/6.png");
  background-size: 100% 100%;
  height: 9.948vw;
  color: #ffffff;
  font-size: 1.354vw;
}

.bg-img .rg {
  position: absolute;
  right: 5.885vw;
  top: 4.5vw;
}

.bg-img .day {
  font-size: 1.875vw;
  text-align: center;
}

.bg-img .num {
  font-size: 3.854vw;
  font-family: Arial-bold;
  font-weight: 600;
}

.quick-btn {
  margin: 0 auto;
  width: 100%;
  position: absolute;
  margin-top: -1.042vw;
  z-index: -1;
  display: flex;
}

.btn-lf,
.btn-cen,
.btn-rg {
  width: 33.3333%;
}

.btn-rg .btn-rg-item {
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 8.49vw;
  border: 1px solid rgba(195, 195, 195);
  border-top: none;
  border-left: none;
  justify-content: center;
}

.btn-rg-item:hover,
.btn-lf:hover {
  box-shadow: 0.156vw 0.156vw 1.042vw #999;
  transform: scale(1.05);
  transition: all 0.5s;
}

.btn-rg-item img {
  width: 2.813vw;
}

.quick-btn .tit {
  color: rgba(100, 100, 100);
  font-size: 1.667vw;
  margin-left: 0.833vw;
  margin-right: 2.396vw;
}

.quick-btn .btn-lf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  text-align: center;
  border: 1px solid rgba(195, 195, 195, 100);
  padding: 2.604vw 0 2.865vw 0;
  color: rgba(100, 100, 100);
  font-size: 1.667vw;
}

.quick-btn .btn-lf .icon {
  margin: 0 auto 0.573vw auto;
  width: 4.01vw;
}

.quick-btn .btn-lf .right {
  width: 2.969vw;
  margin: 0.625vw auto 0 auto;
}

.digital {
  margin-top: 24.948vw;
  height: 18.375vw;
  background-image: url("../assets/images/7.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.digital-box {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  flex-wrap: wrap;
}

.digital-item {
  color: #fff;
  font-size: 2vw;
  text-align: center;
}

.digital-item-num,
.digital-item span {
  font-size: 2.5vw;
  font-weight: 600;
}
:deep(.el-statistic__number) {
  font-size: 2.5vw;
  font-weight: 600;
  color: #fff;
}

.cascade {
  margin: 0 auto;
  background-color: #fff;
  padding: 3.188vw 0;
}

.cascade .cascade-box {
  max-width: 82%;
  margin: 0 auto;
  overflow: hidden;
}

.img-shadow {
  box-shadow: 0.052vw 0.052vw 0.26vw #999;
}

.main-img {
  width: 55.229vw;
  height: 22.083vw;
  object-fit: cover;
}

.category-area {
  padding: 2.24vw 0 3.906vw 0;
}

.sub-title {
  text-align: center;
  color: rgba(66, 66, 66);
  font-size: 3.125vw;
  font-family: SourceHanSansSC-medium;
}

.sub-en {
  text-align: center;
  color: rgba(137, 137, 137);
  font-size: 1.667vw;
}

.cate-line {
  margin-top: 0.677vw;
  width: 4.063vw;
  height: 0.208vw;
  background-color: rgba(255, 100, 0);
  margin-left: 50%;
  transform: translate(-50%);
  margin-bottom: 3.333vw;
}

.cate-box {
  max-width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 3.906vw auto;
}

.cate-item {
  width: 25%;
  font-size: 0;
  cursor: pointer;
}

.cate-box .cate-item img {
  border: 1px solid #eee;
}

.cate-box .cate-item img:hover {
  box-shadow: 0.156vw 0.156vw 1.042vw #999;
  transform: scale(1.05);
  transition: all 0.5s;
}

.platform,
.exhi-list {
  background-color: #fff;
  padding: 2.24vw 0 3.906vw 0;
}

.platform-box,
.exhi-box {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.platform-item {
  width: 10.052vw;
  margin: 0.521vw 0.521vw 0 0.521vw;
}

.platform-item img {
  width: 100%;
  height: 6.5vw;
  border: 1px solid #eee;
  object-fit: contain;
}

.review {
  width: 100%;
  overflow: hidden;
  padding: 2.24vw 0 3.646vw 0;
}

.review-swiper,
.review-swiper2 {
  height: 14.375vw;
  margin-bottom: 1.875vw;
  overflow: hidden;
}

.review-swiper2 {
  margin-bottom: 0;
}

.mr-t-77 {
  margin-top: 4.01vw;
}
.exhi-more {
  font-size: 1.042vw;
  text-align: center;
  margin-top: 3vw;
}
.exhi-more a {
  cursor: pointer;
  color: #ff6400;
}
.cate-item img {
  width: 100%;
  height: 8vw;
}

@media (max-width: 768px) {
  .exhi-more {
    font-size: 3vw;
  }
  .quick-btn .btn-lf {
    padding-top: 1vw;
  }

  .digital {
    margin-top: 29.333vw;
    background-size: auto;
    background-attachment: scroll;
    height: 44.375vw;
  }

  .bg-img .rg {
    right: 2.3vw;
    top: 0.667vw;
  }

  .bg-img .day {
    text-align: center;
    margin-top: 15px;
  }

  .digital .digital-box {
    max-width: 90%;
  }

  .digital-item {
    width: 33.33%;
  }

  .digital-item-num,
  .digital-item,
  .digital-item span {
    font-size: 4vw;
  }
  .cate-box {
    max-width: 90%;
  }

  .cate-box .cate-item {
    width: 33%;
  }

  .sub-title {
    font-size: 4.267vw;
  }

  .sub-en {
    font-size: 3.2vw;
  }

  .cate-line {
    margin-bottom: 4vw;
  }

  .cascade {
    padding: 9.333vw 0;
  }

  .category-area {
    padding-bottom: 0;
  }

  .platform-box,
  .exhi-box {
    max-width: 90%;
  }

  .platform-item {
    width: 32%;
  }

  .platform-item img,
  .cate-item img {
    height: 16vw;
  }
  .review-swiper,
  .review-swiper2 {
    height: 40vw;
  }
}
</style>
